<template>
  <view>
    <view class="position-fixed left-0 right-0 top-0" :style="{top: top,'z-index': 100}">
    	<view class="flex align-center u-p-x-30 main-bg-color" style="height: 88rpx;">
    		<u-search v-model="key" animation @custom="custom" @search="custom" @clear="clear" :actionStyle="{color: '#fff'}" ></u-search>
    	</view>
    </view>
		<mescroll-body ref="mescrollRef" top="88rpx" :bottombar="false" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="u-m-20">
				<view class="u-p-20 u-m-b-20 rounded-20 bg-white" v-for="(item,index) in merchList" :key="item.id">
					<dy-supplier-sec-item :item="item" imgSize="120rpx"></dy-supplier-sec-item>
				</view>
			</view>
		</mescroll-body>
  </view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
  import { SupplierCenterApi } from '@/api/serves.js'
  export default {
		mixins: [MescrollMixin], // 使用mixin
    data() {
      return {
        merchList: [],
        key: '',
        formData: {
          id: -1,
          name: "",
        },
      }
    },
		computed:{
			top() {
			  // #ifdef H5
			  return '44px'
			  // #endif
			  // #ifdef APP-VUE
			  return 0
			  // #endif
			},
		},
    methods: {
			// 上拉加载
			upCallback(page) {
			  SupplierCenterApi.getMerchIndexList({...this.formData, page: page.num}).then(res => {
			    console.log('获取商户列表', res);
			    if (res.code == 1) {
			  		let result = res.data
						result.forEach(item=> {
							item.merch_id = item.id
						})
			  		if(page.num == 1) this.merchList = []; //如果是第一页需手动制空列表
			  		this.merchList = this.merchList.concat(result); //追加新数据
			  		this.mescroll.endByPage(result.length, res.totalpage)
			    }
			  })
			},
			custom(key) {
				this.formData.name = key
				this.mescroll.resetUpScroll()
			},
      clear() {
        this.key = ''
        this.formData.name = ''
        this.mescroll.resetUpScroll()
      },
    }
  }
</script>

<style lang="scss" scoped>

</style>
